Day9 金魚 JQ選單

簡單小語

之前練習往往都是在header上會花些時間，這次的刻意練習就選JQ選單來加深印象，雖然樣板差不多差異在其特效及RWD差異，練習後對於li中包a的用法有了更進一步的想法，display: block取決於要哪一個部分執行，一次給自己練習了五種不同的header方式，雖是自己天馬行空想像，未來實際工作可能不會這麼做，當作給自己思考練習的機會，CSS看起來髒髒的沒有用組合式或是群組式方式是為了未來若有需求，僅需查看該header段落即可，所以才會又臭又長，其實很多地方式能夠簡化合併的，下次來做個OffCavans選單，刻意練習這種RWD會哭哭的硬漢練習。

筆記分享

1. 注意img及menu的相對位置再使用flex排版，加深觀念。
2. 標題logo通常使用文字取代圖片(.logo a)，加強SEO。
3. 若是要用fixed選單(max-width: 1024px)，在960px以上時需固定width: 1024px，避免破版。
4. overflow: hidden使用在header上可以將menu選單移至左右方並隱藏起來。
5. 選單樣式模板多種，此練習自認初階，需要熟悉用法並嘗試新增多層式選單。
6. 可以使用::before, ::after去新增li a中的樣式，增添多樣性。
7. 使用animate套件提升點擊到a的使用者體驗。
8. 點選btn時改變icon方向性，提升使用者體驗(目前用transform方式，應該有更容易的方式變化)。
9. font-awesome可以使用fa-3x, 4x, 5x方式更改大小。
10. 選單配色可上網搜尋配色網站進行調配，避免使用者有礙觀瞻。

刻意練習

Practice(200729 Day 9)

首次練習

Practice(200615_JQ選單)

2020 iT邦幫忙鐵人賽 Day9 網頁前端-刻意練習(JQ選單)